<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相册管理</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<link rel="stylesheet" type="text/css" href="{$_W['siteroot']}addons/hr_album/style/component/layui/css/layui.css" media="all">
	<style>
     body{padding:10px 15px 10px 15px;}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 5px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #009688;
    border-color: #009688;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.428571429;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #009688;
    border-color: #009688;
}
.cubtn{
	height: 30px;
    line-height: 30px;
}
	</style>
</head>
<body>
<div class="layui-form-item">
    <label class="layui-form-label">歌曲名称</label>
    <div class="layui-input-block">
      <input id="bgmusic" style="width:50%;float:left" type="text" name="quality"   placeholder="请输入歌曲名称" autocomplete="off" class="layui-input">      
      <button id="audiolink" type="button" style="float:left;margin-left:10px;margin-right:5px;" class="layui-btn layui-btn-normal">搜索音乐</button>
    </div>
  </div> 
<table class="layui-table" id="mlist">
  <colgroup>
    <col width="300">
    <col width="400">
    <col width="200">
    <col width="200">
    <col width="200">  
  </colgroup>
  <thead>
    <tr>
      <th>音乐名称</th>
	  <th>歌手</th>
	  <th>试听</th>
	  <th>操作</th>
    </tr> 
  </thead>
  <tbody >
   
  </tbody>
</table>
<script type="text/javascript" src="{$_W['siteroot']}addons/hr_album/style/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="{$_W['siteroot']}addons/hr_album/style/component/layui/layui.js"></script>
<script type="text/javascript">
var e_music_player = new Audio;
$("#audiolink").click(function(){
	$("#mlist").html("");
});
$("#audiolink").click(function(){
	var keyword = $("#bgmusic").val();
	if(keyword.length > 0){
		 $.ajax({
		 	   type: 'post',
		        url: '{$_W['siteroot']}web/index.php?c=site&a=entry&do=seachmusic&m=hr_album',
		        dataType: 'json',
		        data: {musicname:keyword},
		        success: function (res) {          	                          
		            if(res.result == 'success'){
		            	$("#mlist").html("");
		            	$("#mlist").html(res.music);
		            }else{
		            	alert('没有找到您要找的音乐');
		            }
		        }
		    });
	}else{
		$('#music').modal('hide');
		alert("请输入要搜索的音乐名称");
	}
});
$("#mlist").on('click','.plays',function(){
    var mymusic = $(this).data('music');
    $("#mlist .plays").each(function(){
    	$(this).text('播放');
    	$(this).css('color','');
    });
    e_music_player.src  = mymusic;
    e_music_player.loop = 'loop';    	
    var text = $(this).text();
    if(text == '播放'){
    	$(this).text('停止');
    	$(this).css('color','#DB4639');
    	e_music_player.play();
    }else{
    	$(this).text('播放');
        e_music_player.pause();
    }
    
});
var index = parent.layer.getFrameIndex(window.name);
$("#mlist").on('click','.playsave',function(){
	var mymusic = $(this).data('music');
	var keyword = $(this).data('musicname');
	var singer = $(this).data('singer');
	parent.$("#bgmusic").val(mymusic); 
	parent.$("input[name='musictitle']").val(keyword);
	parent.$("input[name='singer']").val(singer);
	parent.layer.close(index); 
});
</script>
</body>
</html>